<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <canvas id="canvas" height="600" width="800"></canvas>
    
    <script>
        // 使用 canvas 绘制一个参考线
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext("2d");

        window.onload = function() {
            const cvsW = canvas.width;
            const cvsH = canvas.height;

            const rectW = 10;
            const rectH = 10;

            canvas.style.border = "1px solid #000";

            ctx.lineWidth = .5;

            for(let i = 0;i < cvsW / rectW; i ++){
                ctx.moveTo(0, i * rectH);
                ctx.lineTo(cvsW, i * rectH);

                ctx.moveTo(i * rectW, 0);
                ctx.lineTo(i * rectW, cvsH);
            }

            ctx.stroke();
        }

    </script>
    
</body>
</html>